%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% Auteurs : 			Romain de Wolff & Bruno da Silva
% Date de création : 	2 janvier 2008
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\documentclass[10pt,a4paper,titlepage]{article}
\usepackage[utf8]{inputenc}     % encodage des characteres en utf8
\usepackage[francais]{babel} % pour la table des matières en français 

\usepackage{url} % pour les liens internet
\usepackage[colorlinks=true,linkcolor=black,bookmarks=true,bookmarksopen=true]{hyperref} % rendre les liens clickable
\usepackage{fancyhdr}	 

\usepackage[dvips]{graphicx}
\usepackage{epstopdf}


%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% Pour l'utilisation de code
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\usepackage{listings} 
%\lstset{language=Java, breaklines, fontadjust, inputencoding=utf8, basicstyle=\small, numbers=left, numberstyle=\tiny, tabsize=2}

\usepackage{courier}
\usepackage{color}

% color definitions
\definecolor{dkgreen}{rgb}{0,0.6,0}
\definecolor{gray}{rgb}{0.5,0.5,0.5}
\definecolor{lightblue}{rgb}{0.92,0.92,1}

\lstset{language=Html,
  %keywords={break,case,catch,continue,else,elseif,end,for,function,
  %   global,if,otherwise,persistent,return,switch,try,while},
  basicstyle=\ttfamily\small,
  % basicstyle=\scriptsize, 
  keywordstyle=\color{blue},
  commentstyle=\color{dkgreen},
  stringstyle=\color{red},
  numbers=none,
  numberstyle=\tiny\color{gray},
  stepnumber=1,
  numbersep=10pt,
  backgroundcolor=\color{lightblue},
  tabsize=2,
  linewidth=0pt,
  showspaces=false,
  showstringspaces=false,
  frame=single,
  framexleftmargin=10pt,
  framexrightmargin=10pt,
  framexbottommargin=7pt,
  framextopmargin=7pt,
  linewidth=335pt, % largeur de la ligne de code affichée
  xleftmargin=10pt, % espace avant le debut du cadre
  aboveskip=20pt
}


\usepackage[parfill]{parskip}             % Activate to begin paragraphs with an empty line rather than an indent

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%   Info sur le labo
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newcommand{\branchetag}{WEB}
\newcommand{\branche}{Technologies web}
% \newcommand{\labonummer}{}
\newcommand{\laboname}{jQuery}
\newcommand{\auteurOne}{Romain de Wolff}
\newcommand{\auteurTwo}{Bruno da Silva}
\newcommand{\promo}{IL2008}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\pagestyle{fancy} % defini nos propre header & footer
\fancyhf{} % delete current header and footer 
\fancyhead[L]{\branchetag}
\fancyhead[C]{\laboname}
\fancyhead[R]{\auteurOne \\ \auteurTwo} 
\fancyfoot[L]{\includegraphics[width=3cm]{img/logo-HEIG-VD.jpg}}
\fancyfoot[R]{\bfseries\thepage}

\renewcommand{\headrulewidth}{0.5pt} 
\renewcommand{\footrulewidth}{0.1pt} 
\addtolength{\footskip}{10.0pt} % space for the rule 
\fancypagestyle{plain}{
	\fancyhead{} % get rid of headers on plain pages 
	\fancyfoot{}
	\renewcommand{\headrulewidth}{0pt} % and the line 
	\renewcommand{\footrulewidth}{0pt} % and the line 
}

\author{\auteurOne, \auteurTwo}
\title{\branchetag : \laboname}
\date{\today}

\begin{document}
\pagenumbering{Roman}
\pagestyle{headings}
\begin{titlepage}
	\begin{center}
	\includegraphics{img/logo-HEIG-VD.jpg}\\
		\vspace{3cm}
		\LARGE \branche %Laboratoire No %\labonummer \\
		\vspace{3cm}\\
		\Huge \laboname \\
		\vspace{3cm}

		\Large \textsc{Tutorial} \\
		\vspace{3cm}

		\large \auteurOne \\
		\auteurTwo \\	
		\vspace{10pt}
		\normalsize \textsc{\promo} \\

		\vspace{2cm}
		\today
	\end{center}
\end{titlepage}

\tableofcontents

\newpage
\pagestyle{fancy}
\pagenumbering{arabic}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\section{Introduction}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

Dans ce tutoriel nous allons découvrir ce qu'est jQuery et ce qu'il permet de faire. jQuery est une librairie JavaScript qui simplifie la vie au développement d'application web. Il supporte les navigateur web récent et se charge de la compatibilité.

Nous partons du principe que les bases du HTML sont connues, ainsi qu'un peu d'expérience dans les langage de programmation. 

Les fichiers utilisés dans ce document sont disponibles à l'adresse suivante: \\ \url{http://code.google.com/p/rubyparis/downloads}

Tout d'abord, nous allons créer un premier exemple d'utilisation de jQuery. Puis nous allons voir comment fonctionne AJAX avec jQuery, ce qui est très simple à faire. Enfin, nous allons voir comment effectuer des animations avec jQuery.

Ces quelques exemples devrait suffire pour vous donner envie de continuer d'utiliser jQuery dans vos projets relatif au web.

\newpage
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\section{Premiers pas}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% cf. http://techrageo.us/2007/07/05/jQuery-introduction/

Nous allons commencer par créer un exemple très simple pour se plonger directement  au coeur de jQuery.

\subsection{Création d'une page HTML basique}

Pour commencer nous allons créer une page HTML basique comportant des paragraphes et des liens. Le but n'est pas de faire une page HTML complexe, mais de montrer comment jQuery fonctionne. Vous allez voir c'est très simple.

Voici le fichier source de la page HTML en question.

\begin{lstlisting}
<html>
<body>
  <p>Cliquer ce <a href="#" id="clickme">lien</a>.</p>
  <p class="lorem">Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit.</p>
  <p>Ce texte va rester ici</p>
  <p class="lorem">Phasellus luctus. Suspendisse nisi
  	neque, feugiat eget, ullamcorper at, feugiat ut,
  	tellus.</p>
</body>
</html>
\end{lstlisting}

\subsection{Liaison du script jQuery}

Pour utiliser la librairie jQuery, nous allons devoir spécifier où se trouve ses sources. On peut, à choix, télécharger le fichier \emph{*.js} où alors mettre le chemin complet de son emplacement sur le site de jQuery. \\

Pour ce faire on rajoute une section \texttt{head} entre la section \texttt{html} et \texttt{body} qui va contenir le lien vers le fichier JavaScript (\texttt{*.js}) qui contient la librairie de jQuery.



\begin{lstlisting}
<head>
<script type="text/javascript"
  src="http://code.jQuery.com/jQuery-1.1.3.1.pack.js"/>
</head>
\end{lstlisting}

\subsection{Ajout de code standard jQuery}

Nous allons ajouter maintenant une fonction jQuery.

\begin{lstlisting}
	<script>
	$(document).ready(function() {
	  $("a#clickme").click( function() {
	    $("p.lorem").toggle(100);return false;
	  });
	});
	</script>
\end{lstlisting}

La ligne suivante écrite à l'aide de jQuery

\begin{lstlisting}
$(document).ready(function() { ... } )
\end{lstlisting}

aurait été écrite de la manière suivante en JavaScript  

\begin{lstlisting}
window.onload = function(){ ... }
\end{lstlisting}

\subsection{Que ce passe-t-il?}

On a utilisé une classe HTML nommée \texttt{lorem} qui contient le texte qui disparaît. Le lien portant l'identifiant \texttt{clickme} permet de faire apparaître ou disparaître le texte. 

En définissant la fonction \texttt{toggle} sur click d'un lien, cela fait apparaître et  disparaître les éléments identifiés grâce à la balise : 

\begin{lstlisting}
$("p.lorem").toggle(100);
\end{lstlisting}

On voit que \textbf{jQuery} permet d'accéder, d'une manière très simple, aux objet d'un document HTML, et ce, sans se soucier du navigateur utilisé.

\begin{lstlisting}
<script>
$(document).ready(function() {
  $("a#clickme").click( function() {
    $("p.lorem").toggle(100);return false;
  });
});
</script>
\end{lstlisting}

\subsection{Résumé}

Pour revenir sur les étapes effectuées, voilà en trois lignes ce que l'on a fait: \\

\begin{itemize}
	\item Définir/connaître le nom des objets dans la page HTML
	\item Lier le script jQuery à l'aide d'une des méthodes
	\item Ajouter une fonction sur un événement
\end{itemize}

Une liste exhaustive des événements est disponibles sur le site \url{http://www.gotapi.com}.

\subsection{Sélectionner d'autres éléments}

Voici quelques autres exemples de sélection à l'aide de jQuery. 

\begin{lstlisting}
jQuery('div.panel')
\end{lstlisting}

Tous les éléments \texttt{divs} avec \texttt{class="panel"}

\begin{lstlisting}
jQuery('p#intro')
\end{lstlisting}

Le paragraphe avec \texttt{id="intro"}

\begin{lstlisting}
jQuery('div#content a:visible')
\end{lstlisting}

Tous les liens visibles qui se trouvent à l'intérieur du \texttt{div} avec \texttt{id="content"}

\begin{lstlisting}
jQuery('input[@name=email]')
\end{lstlisting}

Tous les champs de formulaire comportant \texttt{name="email"}

\begin{lstlisting}
jQuery('table.orders tr:odd')
\end{lstlisting}

Les lignes numérotées de tables “étrange” comportant la classe \texttt{orders}

\begin{lstlisting}
jQuery('a[@href^="http://"]')
\end{lstlisting}

Tous les liens externes (liens qui commencent par \verb!http://!).

\begin{lstlisting}
jQuery('p[a]')
\end{lstlisting}

Tous les paragraphes qui contiennent un ou plusieurs liens.

\subsection{Code source de l'exemple}

Voilà le code source du fichier \texttt{basic.html} disponible sur le site \url{http://code.google.com/p/rubyparis/downloads}.

\lstinputlisting{demo/basic.html}

\newpage
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\section{AJAX}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

AJAX permet d'exécuter des requêtes sur d'autre pages sans recharger tout le document en cours. Il permet donc de transférer ou de pré-charger des données. jQuery permet de faire du AJAX simple de manière extrêmement facile, et permet de rendre les choses complexes tout à fait faisables. 

Voici quelques exemples de l'utilisation d'AJAX à l'aide de jQuery.

\subsection{Charger des données dans une zone}

Une utilisation classique d'Ajax est le chargement d'un bout de code HTML à l'intérieur d'une zone d'une page.

Pour faire ceci à l'aide de jQuery, il suffit de sélectionner l'élément désiré et d'utiliser la fonction \texttt{load()}, comme montré dans l'exemple ci dessous. 

\begin{lstlisting}
$('#stats').load("stats.html");
\end{lstlisting}


\subsection{Passer des paramètres à une page}

Très souvent on veut simplement passer des paramètres à une page sur le serveur. Comme vous vous y attendez, ceci se fait de manière extrêmement simple à l'aide de jQuery. 

On a le choix entre \texttt{\$.post()} et \texttt{\$.get()} en fonction de la méthode dont on a besoin. On peut ensuite spécifier optionnellement un objet comportant les données ainsi qu'une fonction appelée une fois l'opération terminée (fonction de type \emph{callback}).

\begin{lstlisting}
$.post('save.cgi', {
    text: 'my string',
    number: 23
}, function() {
    alert('Your data has been saved.');
});
\end{lstlisting}
                                   
\subsection{Instructions complexes en AJAX rendues simples}

Si l'on désire vraiment effectuer des opérations complexes en AJAX, il faut utiliser la fonction \texttt{\$.ajax()}. On spécifie le type de données utilisé (\texttt{xml, html, script ou json}) et jQuery va préparer les résultats de la fonction de retour automatiquement afin de pouvoir l'utiliser tout de suite. 

On peut aussi spécifier \texttt{beforeSend}, \texttt{error}, \texttt{success} ou encore \texttt{complete} qui permet de mieux gérer ce qu'il se passe durant l'utilisation d'AJAX. Pour par exemple dire à l'utilisateur que la transaction a commencé et l'avertir quand elle est terminée.

D'autres paramètres sont disponibles, comme \texttt{timeout} qui permet de limiter le temps d'exécution d'une requête en AJAX.

Voici un exemple d'utilisation d'AJAX. 

\begin{lstlisting}
$.ajax({
    url: 'document.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert('Error loading XML document');
    },
    success: function(xml){
        // faire quelques chose des donnees xml
    }
});
\end{lstlisting}

On peut ensuite imaginer utiliser jQuery pour traiter les données XML reçues et les afficher. Pour ce faire, on va utiliser le même principe que pour les fichiers HTML. Cela rend facile le parcours d'un fichier XML et l'affichage du contenu dans un fichier HTML.

L'exemple suivant montre comment utiliser le paramètre \texttt{sucess} pour appeler une fonction d'affichage de notre XML une fois la transaction correctement effectuée.

\begin{lstlisting}
success: function(xml){
    $(xml).find('item').each(function(){
        var item_text = $(this).text();

        $('<li></li>')
            .html(item_text)
            .appendTo('ol');
    });
}
\end{lstlisting}

\newpage
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\section{Animations}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

On peut utiliser jQuery afin de créer des animation simplement. Certaines sont prédéfinies, d'autres peuvent être facilement créées. A la base des animation dans jQuery, il existe la fonction \texttt{animate()} qui permet de modifier n'importe quelle valeur numérique dans le temps. On peut par exemple facilement animer un changement de hauteur, de position, de couleur ou de transparence. On peut aussi spécifier la vitesse de l'animation en millisecondes, ou à l'aide des vitesses prédéfinies: \texttt{slow}, \texttt{normal} ou \texttt{fast}.

Ci-dessous un exemple qui change la hauteur et la largeur d'un élément en même temps. On remarque qu'il n'y a pas de valeur de départ, les valeurs de départ sont prises à partir de la taille courante de l'élément modifié. On y a ajouté une fonction qui va afficher une alerte lorsque l'animation est terminée.

\begin{lstlisting}
$('#grossi').animate({ height: 500, width: 500 }, "slow", function(){
    alert("L'element a finir de grossir!");
});
\end{lstlisting}

jQuery met à disposition des animations qui sont celles utilisées les plus fréquem-ment. On peut par exemple utiliser \texttt{show()} et \texttt{hide()} pour respectivement afficher ou cacher un élément; soit instantanément, soit à une vitesse spécifiée. On peut aussi utiliser les méthodes \texttt{fadeIn()} et \texttt{fadeOut()} ou \texttt{slideDown()} et \texttt{slideUp()} en fonction des effets que l'on désire. 


Voici un exemple qui fait par exemple apparaître un menu de navigation

\begin{lstlisting}
$('#navigation').slideDown('fast');
\end{lstlisting}

\subsection{Exemple complet}

Voici un exemple complet. Nous allons créer une page HTML comportant 3 liens ainsi qu'un paragraphe. Chaque lien effectuera une animation différente pour faire apparaître le paragraphe en question.

Voilà à quoi ressemble cette page HTML

\begin{lstlisting}
<html>
<head>
</head>
<body>
	<a href="#" class="lien1">anim1: toggle()</a> | 
	<a href="#" class="lien2">anim2: fadeIn() et fadeOut()</a> | 
	<a href="#" class="lien3">anim3: slideToggle()</a>
<p class="text" style="border:1px solid black; color: green;">
	<br>Quelques animations avec jQuery<br><br></p>
</body>
</html>
\end{lstlisting}

Ensuite, nous allons ajouter les animation à l'aide de jQuery. Chaque liens effectuera une action différente sur le paragraphe identifié par \texttt{class="text"}.

Pour cela, il faut commencer par ajouter un lien vers la librairie jQuery comme fait au début de ce document. Ce lien doit se situer dans l'en-tête du fichier HTML.

\begin{lstlisting}
<head>
<script type="text/javascript" 
	src="http://code.jQuery.com/jQuery-1.1.3.1.pack.js"/>
</head>
\end{lstlisting}

Ensuite nous pouvons ajouter les actions sur les différents éléments de notre page HTML. Nous allons commencer par définir l'action globale; l'action effectuée lorsque le document HTML est chargé. 

\begin{lstlisting}
<script>
	$(document).ready(function() {		
		// action a determiner
	});
</script>
\end{lstlisting}

Maintenant il nous faut définir les actions sur les 3 liens HTML. Pour ce faire, nous allons utiliser la fonction \texttt{click()} sur les liens, déjà utilisée précédemment. Dans la fonction \texttt{click}, nous passons en paramètre une fonction anonyme qui va se charger d'effectuer le changement d'affichage (cacher ou afficher).

\begin{lstlisting}
<script>
	$(document).ready(function() {    
		$("a.lien1").click(function() { // sur click du liens "lien1"
			$("p.text").toggle(150);      // appel toggle sur paragraphe
			                              // avec parametre 150 (ms)        
		});
	});
</script>
\end{lstlisting}

Voilà qui est fait pour le premier lien! Ouvrons le fichier HTML dans notre navigateur, et vérifions que cela fonctionne. En cliquant sur le premier lien depuis la gauche, on devrait voir disparaître le paragraphe d'en dessous. Et cliquant à nouveau, celui-ci réapparaît. En si peu de lignes, c'est magique!

Continuons avec le lien suivant. Le deuxième est un peu plus compliqué. En effet la fonction \texttt{toggleFade()} n'existe pas. Nous allons donc utiliser la propriété \texttt{visible} de l'objet courant afin de déterminer s'il faut afficher ou cacher le paragraphe. 

Pour  ce faire, nous allons créer une variable \texttt{p} à partir de l'objet \texttt{p.text}. Ensuite, nous allons vérifier si l'objet \texttt{p} est visible et exécuter la fonction \texttt{fadeOut()} si c'est le cas, et \texttt{fadeIn()} sinon. Les crochets “[” et “]” permettent de reconstruire la fonction appelée sur un objet à l'aide d'une chaîne de caractères. Nous utiliserons le seul opérateur ternaire \texttt{cond ? vrai:faux} qui permet de créer une condition \texttt{if} sur une seule ligne. Ensuite nous ajoutons les parenthèses avec l'éventuel paramètre, ici 800, qui représente les 800 ms que durera l'animation.

Voilà ce que cela donne: 

\begin{lstlisting}
<script>
	$(document).ready(function() {		
		$("a.lien1").click(function() {
			$("p.text").toggle(150);
		});
		$("a.lien2").click(function() {
			p = $("p.text");
		    p[ p.is(':visible') ? 'fadeOut' : 'fadeIn' ](800);
		    return false;
		});	
	});
</script>
\end{lstlisting}

Il ne reste plus qu'à ajouter le 3\up{ème} lien. La seule différence avec le premier lien c'est qu'il utilise non pas la fonction \texttt{toggle()} mais la fonction \texttt{slideToggle()}.

Ajoutons cela et testons à nouveau le fichier HTML. Tous les liens devraient faire soit apparaître, soit disparaître le paragraphe situé en dessous!

Voilà le fichier \texttt{animation.html} complet: 

\lstinputlisting{demo/animation.html}

\newpage
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\section{Conclusion}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

Nous voilà arrivés au bout de ce tutoriel. Espérons que nous avons pu vous montrer que jQuery n'est pas une simple nouvelle librairie JavaScript comme il en existe déjà beaucoup. Mais les fonctionnalités mise à disposition sont vraiment bien faites et permettent de gagner un temps précieux.

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\section{Références}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

Voici les liens qui nous ont aidé et inspiré pour la création de ce tutoriel.

\small
\begin{description}
	\item[\url{http://jquery.com/}] Site officiel de jQuery.
	\item[\url{http://www.jquery.info/}] Site francophone sur jQuery.
	\item[\url{http://docs.jquery.com/Tutorials}] Tutoriels officiels.
	\item[\url{http://www.gotapi.com/html}] Description de l'API jQuery ainsi que HTML. Très utile comme référence rapide et disponibles pour une grande variété de langages courants.
	\item[\url{http://simonwillison.net/2007/Aug/15/jQuery/}] Exemple d'utilisation de jQuery pour les développeur JavaScript.
	\item[\url{http://www-128.ibm.com/developerworks/library/x-ajaxjQuery.html}] Utilisation de AJAX dans jQuery
\end{description}

% \appendix
% 
% \newpage
% \section{CACMIndexer.java}
%\lstinputlisting{../src/rim/cacm/CACMIndexer.java}
% 
% \newpage
% \section{CACMRetriever.java}
% \lstinputlisting{../src/rim/cacm/CACMRetriever.java}

\end{document}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\lstdefinelanguage{JavaScript}{
     keywords={attributes, class, classend, do, empty, endif, endwhile, fail, function, functionend, if, implements, in, inherit, inout, not, of, operations, out, return, set, then, types, while, use},
     keywordstyle=\color{blue}\bfseries,
     ndkeywords={},
     ndkeywordstyle=\color{yellow}\bfseries,
     identifierstyle=\color{black},
     sensitive=false,
     comment=[l]{//},
     commentstyle=\color{green}\ttfamily,
     stringstyle=\color{red}\ttfamily
  }

  \lstset{
     language=JavaScript,
     extendedchars=true,
     basicstyle=\scriptsize,
     showstringspaces=false,
     numbers=left,
     numberstyle=\tiny,
     stepnumber=1,
     numbersep=5pt,
  }
